import React from 'react';
import './vertical_5.css';

class Vertical_5 extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        const {datainfo}=this.props;
        let div1style={width:'10px',height:'10px',display:'inline-block',marginTop:'9px',borderTop:'1px solid #5167A3'}
        return<div>
                { datainfo.length>0?
                    <div  className=" timeline-vertical-5">
                    {
                        datainfo.map((item,i)=>{
                        let contentdata=item.content;
                        let contentArr=contentdata.split(/\n/g);
                        return <div class="timeline-datainfo-vertical-5">
                                    <div className={'timeline-img-vertical-5  num_'+i}>
                                    </div>

                                    <div class="timeline-content-vertical-5">
                                        <div className="timeline-content" >
                                            <div>
                                                {
                                                    contentArr.map((item,i)=>{
                                                        if(item==""){
                                                            return <div style={{display:'block',height:'20px'}}></div>
                                                        }
                                                        return <div className={"wea-f12"} style={{display:'block'}}>{item}</div>
                                                    })
                                                }
                                            </div>
                                        </div>
                                        <div >
                                            <div class="timeline-date-vertical-5">
                                                <div className={'num_'+i }  style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}} title={item.timeline}>{item.timeline}</div>
                                            </div>
                                        </div>
                                        <div className="timeline-bottom-vertical-5"></div>

                                    </div>
                                </div>
                            })
                    }

                </div>
                :
                <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
                }
            </div>

    }
}

export default Vertical_5;